<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element-ui 多选框</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="temp">
        <template>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
        </template>    
    </div>



    <script>
        let website = new Vue({
            el: "#temp",
            data: {
                cityOptions :['上海', '北京', '广州', '深圳'],
                checkedCities:"",
                checkAll:"",
                isIndeterminate:true
                
            },
            methods: {
                handleCheckAllChange(val) {
                    this.checkedCities = val ? cityOptions : [];
                    this.isIndeterminate = false;
                },
                handleCheckedCitiesChange(value) {
                    let checkedCount = value.length;
                    this.checkAll = checkedCount === this.cities.length;
                    this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                }
            }
        })

        // const
        // export default {
        //     data() {
        //         return {
        //             checkAll: false,
        //             checkedCities: ['上海', '北京'],
        //             cities: cityOptions,
        //             isIndeterminate: true
        //         };
        //     },
        //     methods: {
              
        //     }
        // };
    </script>
</body>

</html>